<html window-icon="images/globe.svg" window-resizable="true">
  <head>
    <title>The World</title>
    <style>
    
      frame {size:*;}

      section { flow: horizontal }
      section > * { width:*; }

      img { vertical-align:middle; }
      code { display:inline-block; width:max-content; }
    
    </style>
    <script type="text/tiscript">
    
          
      event click $(#test) 
      {
        view.window {
                type: View.FRAME_WINDOW,
                 url: self.url("main.htm"),
               state: View.WINDOW_SHOWN,
               width: 800,
              height: 600,
           alignment: 5 // center of the screen  
        };
      }      
      
      event change $(form#native-test) {
        var v = this.value;
        // accessing native namespace NativeMath 
        var res = NativeMath.sum(v.a, v.b);
        this.value = { r: res };
        return true;
      }

      function self.ready() {
        // accessing native helloWorld() method defined in C++ class frame: 
        $(#message).text = view.frame.helloWorld();
        $(img#native).value = view.frame.generatedImage();
      }

    
    </script>
  </head>
<body>
  <button #test>Open another one</button>

  <section>
    <form #native-test>
      <text>Native API test</text>
      <input|integer(a) /> + <input|integer(b) /> = <output(r) /> (computed by <code>NativeMath.sum(int a, int b)</code>)
    </form>
    <div>   
      <p><em id="message" /> - produced by native <code>frame::helloWorld()</code> </p>
      <p><img id="native" /> - produced by native <code>frame::generatedImage()</code> </p>
    </div>
  </section>
  <frame src="images/globe.svg" />


</body>
</html>
